<template>
  <div>
    <el-form :model="form" :rules="rules" ref="baseInfoRef" class="optimized-form" label-width="170px" label-position="center" >
      <el-form-item label="农户类型：" prop="farmerType">
        <el-radio-group v-model="form.farmerType">
          <el-radio
            v-for="dict in farmerTypeDict"
            :key="dict.value"
            :label="dict.value"
          >{{dict.label}}</el-radio>
        </el-radio-group>
      </el-form-item>
      
      <el-form-item label="真实姓名/合作社名称：" prop="realName">
        <el-input 
          v-model="form.realName" 
          placeholder="请输入您的真实姓名或者合作社名称" 
          class="wider-input"
        />
      </el-form-item>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="电话号码：" prop="phone">
            <el-input v-model="form.phone" placeholder="请输入您的电话号码" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身份证号：" prop="idCard">
            <el-input v-model="form.idCard" placeholder="请输入您的身份证号" />
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-form-item label="详细地址：" prop="address">
        <el-input v-model="form.address" type="textarea" placeholder="请输入详细地址" :rows="3" />
      </el-form-item>
      
      <el-form-item label="主要农产品(可多选)：" prop="mainProducts">
        <el-checkbox-group v-model="form.mainProducts" class="checkbox-group">
          <el-checkbox
            v-for="dict in mainProductsDict"
            :key="dict.value"
            :label="dict.value">
            {{dict.label}}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      
      <el-form-item label="种植/养殖规模：" prop="scale">
        <el-input v-model="form.scale" type="textarea" placeholder="例：5亩苹果园、200头生猪等" :rows="2" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const props = defineProps({
  // 1.表单的所有数据
  form: {
    type: Object,
    default: () => ({})
  },
  // 2.表单的验证规则
  rules: {
    type: Object,
    default: () => ({})
  },
  // 3.主要农产品的字典数据
  mainProductsDict: {
    type: Array,
    default: () => []
  },
  // 4.农户类型的字典数据
  farmerTypeDict: {
    type: Array,
    default: () => []
  }
});

const baseInfoRef = ref(null);
  
defineExpose({
  validate: () => {
    if (!baseInfoRef.value) {
      return Promise.reject(new Error('表单实例不存在'));
    }
    return baseInfoRef.value.validate();
  }
});
</script>

<style scoped>
</style>